<template>
  <div>
    <table>
      <thead>
        <tr>
          <th><input type="checkbox" v-model="isCheckedAll" />全选</th>
          <th>商品名称</th>
          <th>价格</th>
          <th>数量</th>
          <th>小计</th>
        </tr>
      </thead>
      <tbody>
        <tr
          v-for="(item, index) in shopcartList"
          :key="index"
          @click="shopcartEvent(index, $event)"
        >
          <td>
            <input type="checkbox" :value="item.pid" v-model="ck" />
          </td>
          <td>{{ item.pname }}</td>
          <td>{{ item.price }}</td>
          <td>
            <button class="leftBtn">-</button>
            <input type="text" v-model="item.num" class="num" />
            <button class="rightBtn">+</button>
          </td>
          <td>{{ item.subtotal }}</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="5">总价:{{total}}</td>
        </tr>
      </tfoot>
    </table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      shopcartList: [
        {
          pid: "1001",
          pname: "格力空调1P",
          price: 1998,
          num: 1,
          subtotal: 0,
        },
        {
          pid: "1002",
          pname: "vivo意义像素相机",
          price: 1000,
          num: 1,
          subtotal: 0,
        },
        {
          pid: "1003",
          pname: "HUAWEI手机",
          price: 3998,
          num: 1,
          subtotal: 0,
        },
        {
          pid: "1004",
          pname: "HUAWEI手机",
          price: 3998,
          num: 1,
          subtotal: 0,
        },
        {
          pid: "1005",
          pname: "HUAWEI手机",
          price: 3998,
          num: 1,
          subtotal: 0,
        },
      ],
      isCheckedAll: false,
      ck: [],
    };
  },
  methods: {
    shopcartEvent(index, e) {
      switch (e.target.className) {
        case "leftBtn":
          this.shopcartList[index].num--;
          if (this.shopcartList[index].num < 1) {
            window.alert("数量不能少于1");
            this.shopcartList[index].num = 1;
          }
          break;
        case "rightBtn":
          this.shopcartList[index].num++;
          break;
      }
    },
  },
  watch: {
    shopcartList: {
      deep: true,
      immediate: true,
      handler(newval) {
        //对数组进行遍历
        newval.forEach((item) => {
          if (item.num < 1) {
            alert("不能小于1");
            item.num = 1;
          } else {
            item.subtotal = item.price * item.num;
          }
        });
      },
    },
    isCheckedAll(newval) {
      if (newval) {
        this.ck = this.shopcartList.map((item) => item.pid);
      } else {
        //如果isChecked的值为false，还要判断ck的长度是否和总长度相同，如果相同才继续完成全部不选功能
        if (this.ck.length == this.shopcartList.length) {
          this.ck = [];
        }
      }
    },
    ck: {
      deep: true,
      handler(newval) {
        if (newval.length == this.shopcartList.length) {
          this.isCheckedAll = true;
        } else {
          this.isCheckedAll = false;
        }
      },
    },
  },
  computed:{
    total(){
      let total=0
      this.shopcartList.forEach(item=>{
         //let ck=['1001','1003','1004']  1002
         //如下是完所有勾选的商品信息
         if(this.ck.indexOf(item.pid)!=-1){
            total+=item.subtotal
         }
      })
      return total
    }
  }
};
</script>

<style>
table {
  border-collapse: collapse;
  width: 800px;
}
td,
th {
  border: 1px solid #000;
  text-align: center;
  padding: 10px;
}
.num {
  width: 30px;
  height: 25px;
  text-align: center;
}
.leftBtn,
.rightBtn {
  width: 30px;
  height: 30px;
  margin: 5px;
  border: 0;
  background-color: skyblue;
  color: white;
}
</style>